<template>
  <div class="authority">
    <!-- Main Wrapper -->
    <div class="main-wrapper">
      <Header/>
      <SideBar/>
      <!-- Page Wrapper -->
      <div class="page-wrapper"><!-- :is="currentView" -->
        <div class="content container-fluid">
          <BreadCrumb/>
          
          <h2>职工权限管理</h2>
            姓名：<el-input v-model="user_name" placeholder="请输入局部姓名" class="account"></el-input>
            身份证号：<el-input v-model="id_card" placeholder="请输入局部身份证号" class="account"></el-input>
            学工号：<el-input v-model="user_no" placeholder="请输入局部学工号" class="account"></el-input><br>
            性别：<el-select v-model="user_sex" placeholder="请选择性别">
						<el-option
						v-for="item in sex_options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
            账号状态：<el-select v-model="user_status" placeholder="请选择账号状态">
						<el-option
						v-for="item in status_options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
            <el-button @click="clearItem">清除条件</el-button>
            <el-button type="primary" @click="queryAllUserInfo">查询</el-button>
          <hr>
    <el-table :data="tableData" style="width: 100%"> <!--height="250"-->
        <el-table-column fixed prop="type_is" label="身份" style="width: 10%"></el-table-column>
        <el-table-column prop="user_no" label="学工号" style="width: 10%"></el-table-column>
        <el-table-column prop="user_name" label="姓名" style="width: 10%"></el-table-column>
        <el-table-column prop="user_sex" label="性别" style="width: 10%"></el-table-column>
        <el-table-column prop="id_card" label="身份证号" style="width: 10%"></el-table-column>
        <el-table-column prop="dept" label="所属部门" style="width: 10%"></el-table-column>
        <el-table-column prop="user_status" label="账号状态" style="width: 10%"></el-table-column>
        <el-table-column label="操作" fixed="right" style="width: 20%">
            <template slot-scope="scope">
                <el-button @click="authorityManageDialog(scope.row,scope.$index,tableData)" type="text" size="small">权限管理</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-col :span="24" class="xtes">
        <el-col :span="24" >
        <div class="xtesbox">
        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    class
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination></div>
        </el-col>
    </el-col>

<el-dialog
  title="职工权限管理"
  :visible.sync="authorityDialogVisible"
  width="30%">
  权限-所属角色组
<el-checkbox-group v-model="userPowerGroup">
    <el-checkbox v-for="gname in powerGroup" :label="gname" :key="gname">{{gname}}</el-checkbox>
</el-checkbox-group>
<hr>权限-拥有的角色
<el-checkbox-group v-model="userPowerRoles">
    <el-checkbox v-for="rname in powerRoles" :label="rname" :key="rname">{{rname}}</el-checkbox>
</el-checkbox-group>
  <span slot="footer" class="dialog-footer">
    <el-button @click="authorityDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateUserAuthority">更 新</el-button>
  </span>
</el-dialog>

        </div>
      </div>
      <!-- /Page Wrapper -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import BreadCrumb from '@/components/Breadcrumb'
import Header from '@/components/Header'
import SideBar from '@/components/SideBar'
export default {
  created(){
      this.queryAllRolesAndGroups()
      this.queryAllUserInfo()
  },
  beforeDestroy(){
  },
  mounted(){
  },
  data(){
      return {
        currentPage: 1,
		pageSize: 10,
		total: 0,
        tableData:[],
        // 查询个人信息条件
        user_type: 'Teacher',
        user_no: '',
        user_name: '',
        id_card: '',
        user_sex: '',
        sex_options: [
            {
                label: '男',
                value: '男'
            },
            {
                label: '女',
                value: '女'
            },
            {
                label: '未填写',
                value: '未填写'
            }
        ],
        user_status: '',
        status_options: [
            {
                label: '未激活',
                value: '未激活'
            },
            {
                label: '已激活',
                value: '已激活'
            },
            {
                label: '失效',
                value: '失效'
            }
        ],
        authorityDialogVisible: false,
        // 用户的权限
        userPowerGroup: [],
        userPowerRoles: [],
        thisUserId: '',
        thisUserType: '',
        // 所有的权限
        powerGroup: [],
        powerRoles: [],
        checkAll: false,
      }
  },
  methods: {
      // 查询全体师生信息
      queryAllUserInfo(){
          this.tableData=[]
          this.total=0
        let config = {
            method: 'post',
            url: 'edu/teabase/user_info',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                user_type: this.user_type,
                user_no: this.user_no,
                name: this.user_name,
                id_card: this.id_card,
                user_sex: this.user_sex,
                user_status: this.user_status
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.tableData=response.data.page.list
                this.total=response.data.page.totalCount
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
    handleSizeChange(val) {
        this.pageSize = val;
        this.queryAllUserInfo();
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        this.currentPage = val;
        this.queryAllUserInfo();
        console.log(`当前页: ${val}`);
    },
    handleSelectionChange(data) {
        console.log('获取row', data)
        // 当前多选的数据
        this.multipleSelection = data;
    },
        clearItem(){
            this.user_no = ''
            this.user_name = ''
            this.id_card = ''
            this.user_sex = ''
            this.user_status = ''
        },
    authorityManageDialog(row, index, tabledata){
        // 1.上个用户的权限结果可能还有残留，先清除
        this.userPowerGroup = []
        this.userPowerRoles = []
        this.thisUserId = row.id_is
        this.thisUserType = row.type_is==='Teacher'?'tea':''
        // 2.查询该用户的权限
        let config = {
            method: 'post',
            url: 'edu/admin/auOne',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                userId: row.id_is,
                userType: row.type_is==='Teacher'?'tea':''
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.userPowerGroup = response.data.groups
                this.userPowerRoles = response.data.roles
            }else{
                // 这种情况下是没有任何权限数据的，也没报错，所以弹窗会正常显示，直接赋空值
                this.userPowerGroup = []
                this.userPowerRoles = []
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
        // 3.再打开弹窗
        this.authorityDialogVisible = true
    },
    // 查询所有的角色组和角色
    queryAllRolesAndGroups(){
        let config = {
            method: 'get',
            url: 'edu/admin/auQuery'
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.powerGroup = response.data.groups
                this.powerRoles = response.data.roles
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
    },
    // 更新该用户的权限
    updateUserAuthority(){
        let config = {
            method: 'post',
            url: 'edu/admin/auUpd',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                userId: this.thisUserId,
                userType: this.thisUserType,
                newGroup: this.userPowerGroup,
                newRoles: this.userPowerRoles
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.authorityDialogVisible = false
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
    }
  },
  components: {
	Header,
    BreadCrumb,
	  SideBar
  }
}
</script>

<style>
.account{
    width: 200px;
    height: 35px;
    margin-bottom: 20px;
    padding-left: 10px;
}
.xtes {
    margin-top: 20px;
    margin-bottom: 20px;
}
.xtesbox{
    float: right;
    padding-right: 150px;
}
</style>